<script setup>
/**
 * & 文件引入区域
 */

import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
/**
 * & 注册区
 */

/**
 * & 变量声明区
 */
const router = useRouter();

/**
 * & 函数区
 */
const toFlightOederFun = () => {
  router.push({
    path: "/flightOeder",
  });
};
</script>

<template>
  <div class="CabinPage">
    <div class="top">
      <TicketPageTop :title="'Select a cabin'" />
    </div>

    <div class="flightInfo">
      <FlightInfo :info="'2023.07.31 Monday Time 2h20m'" />
    </div>

    <div class="cabinList">
      <div class="item" v-for="(item, i) in 5" :key="i">
        <div class="left">
          <div class="top">
            <div class="price"><span>Pi</span> 68</div>
            <img src="/images/Shop/cabinLogo.png" alt="" class="logo" />
          </div>

          <div class="bottom">
            <div class="type">Economy Class(Y)</div>
            <span>
              Baggage allowance:20kg <br />
              Non-refundable
            </span>
          </div>
        </div>

        <div class="btn" @click="toFlightOederFun()">Booking</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.CabinPage {
  >.flightInfo {
    padding: 0 16rem;
  }

  >.cabinList {
    margin-top: 16rem;
    padding: 0 8rem;

    >.item {
      display: flex;
      justify-content: space-between;
      padding: 5rem;
      box-shadow: 0rem 5rem 20rem -10rem rgba(197, 197, 197, 0.3);
      margin-bottom: 8rem;

      >.left {
        >div {
          display: flex;
          align-items: center;
        }

        >.top {
          margin-left: 12rem;

          >.price {
            font-size: 20rem;
            font-weight: 400;
            line-height: 28rem;
            color: rgba(100, 46, 142, 1);
            margin-right: 30rem;

            span {
              color: #999;
              font-size: 14rem;
            }
          }

          >.logo {
            width: 80rem;
          }
        }

        >.bottom {
          align-items: start;
          font-size: 10rem;
          font-weight: 400;
          line-height: 14rem;
          color: rgba(173, 170, 170, 1);

          >.type {
            margin-right: 20rem;
            font-size: 12rem;
            line-height: 16rem;
            color: #424141;
          }
        }
      }

      >.btn {
        margin-right: 3rem;
        padding: 5rem 10rem 8rem;
        border-radius: 4rem;

        background: #642e8e;
        height: max-content;

        color: #fff;
        font-size: 10rem;
        font-weight: 400;
        line-height: 14rem;
      }
    }
  }
}
</style>
